<template>
  <div id="invReaStDiv">
    <Breadcrumb content="物品台账查询" />
    <div class="bodyContent">
      <vxe-form :data="searchForm" class="searchform form-input-m">
        <vxe-form-item title="财务月份：">
          <!-- <el-date-picker style="width:100%;" v-model="searchForm.expiryDate" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
          </el-date-picker> -->
          <el-date-picker v-model="searchForm.startMonth" value-format="YYYY-MM" type="month" /> -
          <el-date-picker v-model="searchForm.endMonth" value-format="YYYY-MM" type="month" />
        </vxe-form-item>
        <vxe-form-item>
          <vxe-button type="text" class="button-blue" icon="vxe-icon-search" content="查询" :loading="tloading" @click="findReagentLedgerList"></vxe-button>
        </vxe-form-item>
      </vxe-form>
      <div class="tableBox">
        <!-- :footer-method="ggggg" -->
        <vxe-table ref="invReagentTableRef" :data="reagentStocList" :show-footer="true" @cell-dblclick="getDetails" :footer-method="footerMethod" :loading="tloading" class="mytable-scrollbar" border align="center" height="auto" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow>
          <vxe-column type="seq" width="30"></vxe-column>
          <vxe-column field="reana" title="品名" width="200"></vxe-column>
          <vxe-column field="gg" title="规格" width="100">
          </vxe-column>
          <vxe-column field="unit" title="单位" width="80">
          </vxe-column>
          <vxe-column field="sccj" title="生产厂家" width="200">
          </vxe-column>
          <vxe-colgroup title="期初结存">
            <vxe-column field="qcNum" title="数量" width="100"></vxe-column>
            <vxe-column field="qcMount" title="金额" width="100"></vxe-column>
          </vxe-colgroup>
          <vxe-colgroup title="本期收入">
            <vxe-column field="bqNum" title="数量" width="100"></vxe-column>
            <vxe-column field="bqMount" title="金额" width="100"></vxe-column>
          </vxe-colgroup>
          <vxe-colgroup title="本期支出">
            <vxe-column field="totalamount1" title="数量" width="100"></vxe-column>
            <vxe-column field="totalprice1" title="金额" width="100"> </vxe-column>
          </vxe-colgroup>
          <vxe-colgroup title="期末结存">
            <vxe-column field="totalamount" title="数量" width="100"></vxe-column>
            <vxe-column field="totalprice" title="金额" width="100"></vxe-column>
          </vxe-colgroup>
        </vxe-table>

        <vxe-modal v-model="moduleDialog" title="台账明细" width="85vw" height="75vh" show-zoom resize>
          <h1 style="text-align:center;font-size:20px;">台账明细</h1>
          <h1 style="text-align:center;font-size:20px;">{{searchForm.startMonth}} — {{searchForm.endMonth}}</h1>
          <vxe-table ref="invReagentTableRef" :data="reagentStocList" :loading="tloading" class="mytable-scrollbar" border align="center" height="70%" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow>
            <vxe-column type="seq" width="30"></vxe-column>
            <vxe-column field="reana" title="品名" width="200"></vxe-column>
            <vxe-column field="gg" title="规格" width="100">
            </vxe-column>
            <vxe-column field="unit" title="单位" width="80">
            </vxe-column>
            <vxe-column field="sccj" title="生产厂家" width="200">
            </vxe-column>
            <vxe-colgroup title="期初结存">
              <vxe-column field="qcNum" title="数量" width="100"></vxe-column>
              <vxe-column field="qcMount" title="金额" width="100"></vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="本期收入">
              <vxe-column field="bqNum" title="数量" width="100"></vxe-column>
              <vxe-column field="bqMount" title="金额" width="100"></vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="本期支出">
              <vxe-column field="totalamount1" title="数量" width="100"></vxe-column>
              <vxe-column field="totalprice1" title="金额" width="100"> </vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="期末结存">
              <vxe-column field="totalamount" title="数量" width="100"></vxe-column>
              <vxe-column field="totalprice" title="金额" width="100"></vxe-column>
            </vxe-colgroup>
          </vxe-table>
        </vxe-modal>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { isEmpty } from 'lodash';
import VxePulldownSelectionWithNa from '@/components/VxePulldownSelectionWithNa.vue';
import moment from 'moment';

// 全局变量定义区 ==========
let searchForm = reactive({
  startMonth: moment().format('YYYY-MM'),
  endMonth: moment().format('YYYY-MM')
});

const footerData = ref([['合计', , ,]]);
let defaultProps = {
  children: 'children',
  label: 'storeName'
};
let tloading = ref(false); //刷新加载状态
let reagentStocList: any = reactive([]);
let moduleDialog = ref(false);

// 方法定义区 =============
// 页面加载时更新组织机构列表(左侧)
onMounted(() => {
  findReagentLedgerList();
});
// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findReagentLedgerList();
  }
}
function findReagentLedgerList() {
  tloading.value = true;
  reagentStocList.length = 0; //放入数据前清空数据
  const url = '/inv/invReagentLedger/findReagentLedgerList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        startMonth: searchForm.startMonth,
        endMonth: searchForm.endMonth
      }
    })
    .then((res: any) => {
      reagentStocList.push(...res.data);
      tloading.value = false;
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function footerMethod() {
  let totalamount = 0;
  let totalprice = 0;
  reagentStocList.forEach((element) => {
    totalamount += element.totalamount;
    totalprice += element.totalprice;
  });
  footerData.value = [['合计', '', '', '', '', '', '', '', '', '', '', totalamount + '', totalprice + '']];
  return footerData.value;
}

function getDetails({ row }: any) {
  moduleDialog.value = true;
}
</script>

<style lang="scss" scoped>
#invReaStDiv {
  width: 100%;
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);
    // 附加按钮间距
    .button-blue {
      margin: 5px 0 5px 5px;
    }
    .button-red {
      margin: 5px 0 5px 5px;
    }
    .searchform {
      padding: 10px 0 0 10px;

      :deep(.vxe-form--item) {
        margin-right: 30px;
      }
    }

    .searchform .vxe-input {
      --el-input-width: 120px;
    }

    .searchform .vxe-select {
      --el-select-width: 120px;
    }

    .tableBox {
      height: calc(100% - 40px);
      background-color: $base-white;
    }

    .el-tabs {
      height: 100%;
      // 右侧保存按钮
      .saveBtn {
        margin: 0px 30px;
      }
    }
  }
}
</style>
